<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        font{
            color: red;
        }
    </style>
    <script>
        var reg= /[a-zA-Z]+/;
        var re = /^[0-9]+.?[0-9]*$/;
        function yhm(val) {
            var sj = document.getElementById(val).value;
            var arr = sj.split("");
            var key1 = false;
            var key2 = false;
            for (var i = 0; i < arr.length; i++) {
                if (reg.test(arr[i])){
                    key1 = true;
                } if (re.test(arr[i])){
                    key2 = true;
                }
            }
            if (key1&&key2){
                if (sj.length<=6){
                    document.getElementById("a").innerHTML = "必须是6位以上";
                    document.getElementById('a').style.color = 'red'
                }else if (sj.length>6){
                    document.getElementById("a").innerHTML = "√";
                    document.getElementById('a').style.color = 'chartreuse'
                }
            } else {
                if (sj.length<=6){
                    document.getElementById("a").innerHTML = "必须是6位以上字母数字组合";
                    document.getElementById('a').style.color = 'red'
                } else {
                    document.getElementById("a").innerHTML = "必须是字母数字组合";
                    document.getElementById('a').style.color = 'red'
                }
            }
        }
        function mm(val) {
            var sj = document.getElementById(val).value;
            var arr = sj.split("");
            for (var i = 0; i < arr.length; i++) {
                if (!re.test(arr[i])){
                    document.getElementById("b"+val).innerHTML = "√";
                    document.getElementById('b'+val).style.color = 'chartreuse';
                    return;
                }
            }
            document.getElementById('b'+val).innerHTML = "密码不能是纯数字";
            document.getElementById('b'+val).style.color = 'red';
            if (val==3){
                f('3');
            }
        }
        function yx(val) {
            var a = document.getElementById(val).value;
            if (a.split("@")[1]=="qq.com"){
                document.getElementById("d").innerHTML = "√";
                document.getElementById("d").style.color = 'chartreuse';
            } else {
                document.getElementById("d").innerHTML = "邮箱格式不正确";
                document.getElementById("d").style.color = 'red';
            }
        }
        function f(val) {
            var js = document.getElementById("2").value;
            var qrmm = document.getElementById(val).value;
            if (qrmm!=js){
                document.getElementById('b3').innerHTML = "密码不一致";
                document.getElementById('b3').style.color = 'red';
            }
        }
        function f1() {
            if (document.getElementById('1').value=="")alert("用户名不能为空!");
            if (document.getElementById('2').value=="")alert("密码不能为空!");
            if (document.getElementById('3').value=="")alert("确认密码不能为空!");
            if (document.getElementById('4').value=="")alert("邮箱不能为空!");
        }
    </script>
</head>
<body>
    <form onsubmit="f1()">
        用户名:<input type="text" name="uname" id="1" onkeyup="yhm(this.id)"><font id="a">必填</font><br>
        密码:<input type="password" name="pwd" id="2" onkeyup="mm(this.id)"><font id="b2">必填</font><br>
        确认密码:<input type="password" name="rpwd" id="3" onkeyup="mm(this.id)"><font id="b3">必填</font><br>
        邮箱:<input type="text" name="email" placeholder="@qq.com" id="4" onkeyup="yx(this.id)"><font id="d">必填</font><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>